<template>
<div class="rx-mobile-search-box">
    <div class="rx-mobile-grid-box">
        <div>
            <a-form>
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label="i18n('list.enableSearch','是否开启搜索条件')" >
                            <a-switch v-model="isSearchView" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div class="rx-mobile-grid-toolbar">
            <a-button type="primary" @click="addGridData">{{i18n('list.addConfig','新增条件配置')}}</a-button>
            <a-button class="rx-mobile-button rx-modile-del" @click="remove">{{i18n('list.deleteLine','删除行')}}</a-button>
            <a-button class="rx-mobile-button rx-mobile-up" @click="handleButtons('up')">{{i18n('list.upward','向上')}}</a-button>
            <a-button class="rx-mobile-button rx-mobile-down" @click="handleButtons('down')">{{i18n('list.down','向下')}}</a-button>
        </div>
        <div class="rx-mobile-grid-container">
            <rx-grid
                ref="rxTable"
                :bordered="true"
                :showColumnsMenu="true"
                :dataSource="gridData"
                :columns="columns"
                :allowRowSelect="true"
                :heightAuto="true"
                :multiSelect="true"
                :showPage="false"
            >
                <span slot="type" slot-scope="{text,record,index}">
          <a-select v-model="record.type">
            <a-select-option value="query">{{i18n('list.queryPara','查询参数')}}</a-select-option>
<!--            <a-select-option value="income">{{i18n('list.incomPara','传入参数')}}</a-select-option>-->
          </a-select>
        </span>
                <span slot="tablePre" slot-scope="{text,record,index}">
          <a-input v-model="record.tablePre" />
        </span>
                <span slot="fieldName" slot-scope="{text,record,index}">
          <a-select show-search style="width:100%;" v-if="mdl.useCondSql!='WEBREQ'" v-model="record.fieldName"
                    option-filter-prop="children" :filter-option="filterOption" @focus="fieldFocus(record)"
                    @change="changeFieldName($event,record,'fieldLabel')" :options="fieldDatas"></a-select>
                            <a-input v-model="record.fieldName" v-else />
        </span>
                <span slot="fieldLabel" slot-scope="{text,record,index}">
          <a-input v-model="record.fieldLabel" />
        </span>
                <span slot="autoFilter" slot-scope="{text,record,index}">
          <a-select v-model="record.autoFilter">
            <a-select-option value="YES">{{i18n('yes','是')}}</a-select-option>
            <a-select-option value="NO">{{i18n('no','否')}}</a-select-option>
          </a-select>
        </span>
                <span slot="defaultVal" slot-scope="{text,record,index}">
            <a-input v-model.trim="record.defaultVal" />
        </span>
                <span slot="fieldOp" slot-scope="{text,record,index}">
          <a-select v-if="record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob'" v-model="record.fieldOp">
                  <a-select-option value="EQ">{{i18n('equal','等于')}}</a-select-option>
                  <a-select-option value="NEQ">{{i18n('notEqual','不等于')}}</a-select-option>
                  <a-select-option value="IN">{{i18n('include','包含')}}</a-select-option>
                  <a-select-option value="LK">{{i18n('fuzzyMatch','模糊匹配')}}</a-select-option>
                  <a-select-option value="LEK">{{i18n('leftQuery','左模糊查询')}}</a-select-option>
                  <a-select-option value="RIK">{{i18n('rightQuery','右模糊查询')}}</a-select-option>
                </a-select>
              <a-select v-if="(record.dataType=='int' || record.dataType=='number')&& record.fc!='rangepicker'" v-model="record.fieldOp">
                  <a-select-option value="EQ">{{i18n('equal','等于')}}</a-select-option>
                  <a-select-option value="NEQ">{{i18n('notEqual','不等于')}}</a-select-option>
                  <a-select-option value="IN">{{i18n('include','包含')}}</a-select-option>
                  <a-select-option value="LT">{{i18n('lessThan','小于')}}</a-select-option>
                  <a-select-option value="LE">{{i18n('lessOrEqual','小于等于')}}</a-select-option>
                  <a-select-option value="GT">{{i18n('greater','大于')}}</a-select-option>
                  <a-select-option value="GE">{{i18n('greatOrEqual','大于等于')}}</a-select-option>
                </a-select>
             <a-select v-if="record.dataType=='date' && record.fc!='rangepicker'" v-model="record.fieldOp">
                  <a-select-option value="EQ">{{i18n('equal','等于')}}</a-select-option>
                  <a-select-option value="NEQ">{{i18n('notEqual','不等于')}}</a-select-option>
                  <a-select-option value="LT">{{i18n('lessThan','小于')}}</a-select-option>
                  <a-select-option value="LE">{{i18n('lessOrEqual','小于等于')}}</a-select-option>
                  <a-select-option value="GT">{{i18n('greater','大于')}}</a-select-option>
                  <a-select-option value="GE">{{i18n('greatOrEqual','大于等于')}}</a-select-option>
                </a-select>
        </span>
                <span slot="fc" slot-scope="{text,record,index}">
          <a-select style="width: 100%" v-model="record.fc" :options="fieldControls"></a-select>
        </span>
                <span slot="searchSetting" slot-scope="{text,record,index}">
          <a-button @click="showSearchConfigEditor($event,record)">{{i18n('list.config','配置')}}</a-button>
          <span v-if="record.isSeted" class="is-seted"><i class="iconfont iconsuccess_fill is-seted"></i>{{i18n('configured','已配')}}</span>
        </span>
            </rx-grid>
        </div>
    </div>
</div>
</template>

<script>
import {RxGrid} from "@lowcode/jpaas-common-lib";

export default {
    name: "mobileSearch",
    components:{
        RxGrid
    },
    data(){
        return {
            vm:null,
            columns:[{
                title: this.i18n('form.paramType','参数类型'),
                dataIndex: 'type',
                scopedSlots: {customRender: 'type'},
                width:120
            },
                {title: this.i18n('form.prefix','表前缀'), dataIndex: 'tablePre', scopedSlots: {customRender: 'tablePre'}, width:100},
                {
                    title: this.i18n('form.searchField','搜索字段'),
                    dataIndex: 'fieldName',
                    scopedSlots: {customRender: 'fieldName'},
                    width:120
                },
                {title: this.i18n('form.label','标签'), dataIndex: 'fieldLabel', scopedSlots: {customRender: 'fieldLabel'}, width:120},
                {
                    title: this.i18n('form.autoFilter','自动过滤'),
                    dataIndex: 'autoFilter',
                    scopedSlots: {customRender: 'autoFilter'},
                    width:80
                },
                {
                    title: this.i18n('form.comparator','比较符'),
                    dataIndex: 'fieldOp',
                    scopedSlots: {customRender: 'fieldOp'},
                    width:100
                },
                {
                    title: this.i18n('form.inputCtl','输入控件'),
                    dataIndex: 'fc',
                    scopedSlots: {customRender: 'fc'},
                    width:120
                },
                {
                    title: this.i18n('form.searchConfig','搜索配置'),
                    dataIndex: 'searchSetting',
                    scopedSlots: {customRender: 'searchSetting'},
                    width:120
                }
            ],
            isSearchView:true,
            gridData:[],
            curRecord:{},
            fieldDatas:[],
            fieldControls:[],
            mdl:{}
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        setData(vm,data){
            this.vm=vm;
            this.fieldDatas=this.vm.fieldDatas;
            let list =['textbox','datepicker','rangepicker','month','select','user','group','dialog']
            this.fieldControls=this.vm.fieldControls.filter(item=>{
                return   list.includes(item.value)
            });
            this.mdl=this.vm.mdl;
            this.isSearchView=(data.mobileIsSearchView || 'YES')=='YES';
            this.gridData.push(...(data.mobileSearch || []));
        },
        getData(){
            var ary=this.$refs.rxTable.getData();
            return {success:true,data:{mobileIsSearchView:this.isSearchView?'YES':'NO',mobileSearch:ary}};
        },
        addGridData(){
            this.$refs.rxTable.addRow({fc: 'textbox', type: 'query', fieldName:'', autoFilter: 'YES', fieldOp: 'EQ'})
        },
        remove(){
            var table=this.$refs.rxTable
            table.removeRows();
            table.selectedRowKeys=[];
            table.selectedRows=[];
            this.$forceUpdate();
        },
        handleButtons(fun){
            let table = this.$refs.rxTable ;
            if(fun=='up'){
                table.moveUp();
            }else if(fun=='down'){
                table.moveDown();
            }
        },
        fieldFocus(record){
            this.curRecord=record;
        },
        filterOption(input, option) {
            this.curRecord["searchField"]={key:input,change:true};
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        changeFieldName(value,record,header){
            this.vm.changeFieldName(value,record,header);
        },
        showSearchConfigEditor(event,record){
            this.vm.showSearchConfigEditor(event,record,this.$refs.rxTable);
        }
    }
}
</script>

<style scoped>
.rx-mobile-grid-toolbar{
    padding-bottom:10px;
}
.rx-mobile-grid-toolbar button{
    margin-right: 10px;
}
.rx-mobile-grid-toolbar button:last-child{
    margin-right: 0;
}
.rx-mobile-grid-toolbar .rx-mobile-button{
    background-color: #f5f7fa;
}
.rx-mobile-grid-toolbar .rx-mobile-button:focus,
.rx-mobile-grid-toolbar .rx-mobile-button:active{
    border-color: #d9d9d9;
    color: rgba(0,0,0,.65);
}
.rx-mobile-grid-toolbar .rx-modile-del:hover{
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
}
.rx-mobile-grid-box{
    margin-bottom: 40px;
}
</style>